<template>
  <el-form
    ref="ruleForm"
    :inline="true"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-form-item label="编号" prop="id">
        <el-input v-model="ruleForm.id" readonly style="width: 800px" :clearable="true" />
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item label="书名" prop="bookName">
        <el-input v-model="ruleForm.bookName" style="width: 800px" />
      </el-form-item>
    </el-row>

    <!--        <el-row>-->
    <!--            <el-form-item label="图片" prop="cover">-->
    <!--                <el-input v-model="ruleForm.cover" style="width: 200px"></el-input>-->
    <!--            </el-form-item>-->
    <!--        </el-row>-->

    <el-row>
      <el-form-item label="定价" prop="price">
        <el-input v-model="ruleForm.price" style="width: 200px" />
      </el-form-item>
    </el-row>

    <el-form-item label="作者" prop="author">
      <el-input v-model="ruleForm.author" style="width: 200px" />
    </el-form-item>
    <el-form-item label="出版社" prop="press" style="margin-left: 10px">
      <el-input v-model="ruleForm.press" style="width: 200px" />
    </el-form-item>

    <el-row>
      <el-form-item label="出版时间" required>
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              v-model="ruleForm.publishingTime"
              type="date"
              placeholder="选择日期"
              style="width: 200px;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="印刷时间" required>
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              v-model="ruleForm.printingTime"
              type="date"
              placeholder="选择日期"
              style="width: 200px;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-row>

    <el-form-item style="margin-left: 100px">
      <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
      <!--            <el-button @click="resetForm('ruleForm')">重置</el-button>-->
      <el-button @click="returnManager">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import userApi from '@/api/user'
export default {
  data() {
    return {
      // :model绑定对象
      ruleForm: {
        id: '',
        bookName: '',
        cover: '',
        price: '',
        author: '',
        press: '',
        publishingTime: '',
        printingTime: ''
      },
      // :rules绑定校验规则
      rules: {
        bookName: [
          { required: true, message: '请输入书名', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        cover: [
          { required: true, message: '请选择大图', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'change' }
        ],
        discount: [
          { required: false, message: '请输入折扣', trigger: 'change' }
        ],
        nowPrice: [
          { required: false, message: '请输入当前价格', trigger: 'change' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'change' }
        ],
        press: [
          { required: true, message: '请输入出版社', trigger: 'change' }
        ],
        publishingTime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        printingTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // console.log(this.$route.params.id)
    // 获取指定id的图书
    this.$http.get('/bookcity/book/getbookbyid/' + this.$route.params.id + '').then(res => {
      this.ruleForm = res.data.data[this.$route.params.id]
    })
  },
  methods: {
    getYMDHMS(timestamp) {
      const time = new Date(timestamp)
      const year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()
      let second = time.getSeconds()

      if (month < 10) { month = '0' + month }
      if (date < 10) { date = '0' + date }
      if (hours < 10) { hours = '0' + hours }
      if (minute < 10) { minute = '0' + minute }
      if (second < 10) { second = '0' + second }
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm.printingTime)
          var postData = {
            'author': this.ruleForm.author,
            'bookName': this.ruleForm.bookName,
            'cover': this.ruleForm.cover,
            'firstId': this.ruleForm.firstId,
            'id': this.ruleForm.id,
            'press': this.ruleForm.press,
            'price': this.ruleForm.price,
            'printingTime': this.getYMDHMS(this.ruleForm.printingTime),
            'publishingTime': this.getYMDHMS(this.ruleForm.publishingTime),
            'secondId': this.ruleForm.secondId
          }
          // console.log(postData)
          // 修改提交
          userApi.updateBook(postData).then(res => {
            // console.log(res.data.code)
            this.$alert('《' + this.ruleForm.bookName + '》修改成功', '消息提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push({ path: '/bookSearch', name: '搜索显示' })
              }
            })
          }, err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    returnManager() {
      this.$router.push({ path: '/bookSearch', name: '搜索显示' })
    }
  }
}
</script>

<style scoped>

</style>
